import React, { Component,Suspense } from 'react'
import { NavLink, withRouter } from 'react-router-dom'
import RouterView from '../router/router'
import rules from '../router/rules'
import { Spin } from 'antd';
import 'antd/lib/spin/style/index.css'
import {getCartList,getCartNumber} from '../request/cart_request'
class Layout extends Component {
    state = {
        carList: []
    }
    UNSAFE_componentWillMount(){
        this.setCarList()
    }
    setCarList(){
        getCartList().then(carList=>{
            if(carList){
                this.setState({carList})
            }else{
                this.setState({carList:[]})
            }
            
        })
    }

    render() {
        const {carList} = this.state
        return (
            <>  
                <Suspense fallback={<div style={{textAlign:'center'}}><Spin /></div>}>
                    <RouterView CarList={carList} restCarList={this.setCarList.bind(this)} routes={rules}></RouterView>
                </Suspense>
                {
                    this.props.location.pathname !== "/goods_detail/"?<div className="tabbar">
                        <NavLink activeClassName="router-link-active" className="icon icon-home" to="/home">
                            商城
                        </NavLink>
                        <NavLink activeClassName="router-link-active" className="icon icon-cate" to="/cate">
                            分类
                        </NavLink>
                        <NavLink activeClassName="router-link-active" className="icon icon-cart" to="/cart">
                            {
                                getCartNumber(carList) !== 0?<span className="badge">
                                    {getCartNumber(carList)}
                                </span>:""
                            }
                            购物车
                        </NavLink>
                        <NavLink activeClassName="router-link-active" className="icon icon-user" to="/uncenter">
                            我的
                        </NavLink>
                    </div> : ""
                }

            </>
        )
    }
}

export default withRouter(Layout)